<style scoped>
    .loginBox {
        width: 350px;
        height: 500px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 10px;
        background-color: #fff;
        border-radius: 10px;
    }
    .loginIcon {
        width: 90px;
        height: 65px;
    }
    .input-box {
        border: 1px solid #eee;
        padding: 5px 15px;
        border-radius: 4px;
    }
    .input-box.active {
        border: 1px solid rgba(26, 188, 156, 1);
    }
    .btn-green {
        background-color: rgba(26, 188, 156, 1)
    }
    .temp {
        webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
</style>
<template>
    <div class="flex-c-c" style="width:100%;height:100%;background-color: rgba(26, 188, 156, 1)">
        <div class="loginBox p-15">

            <div v-show="type === 'login'">

                <div class="t-c m-15-0">
                    <img src="assets/image/login-icon.png" class="loginIcon">
                </div>
                <div class="green text-24 t-c blod m-b-20">
                    延安市网络综合治理执法平台
                </div>
                <div class="m-b-10">
                    <div class="input-box flex-c m-b-10" :class="{active: activeInput === 'username'}">
                        <img class="img-24 m-r-10" src="assets/image/input-pass.png">
                        <Input @on-focus="activeInput = 'username'" @on-blur="activeInput = ''" :border="false" class="h40 flex-1 p-0-15" placeholder="请输入用户名称"/>
                    </div>

                    <div class="input-box flex-c m-b-5" :class="{active: activeInput === 'password'}">
                        <img class="img-24 m-r-10" src="assets/image/input-pass.png">
                        <Input type="password" @on-focus="activeInput = 'password'" @on-blur="activeInput = ''" :border="false" class="h40 flex-1 p-0-15" placeholder="请输入登录密码" placeholder-class/>
                    </div>

                    <div  class="t-r"><span class="green cursor-p" @click="changeType('forget')">忘记密码</span></div>
                </div>
                <div class="flex-c m-b-20">

                    <div class="input-box flex-1 flex-c m-r-15" :class="{active: activeInput === 'vcode'}">
                        <Input v-model="vcode" @on-focus="activeInput = 'vcode'" @on-blur="activeInput = ''" :border="false" class="h40 flex-1 p-0-15" placeholder="请输入验证码"/>
                    </div>
                    <div @click="changeVcode" class="green blod text-24 temp w80">{{vcodeTemp}}</div>

                </div>
                <div class="flex-c">
                    <Button @click="confirmLogin" class="btn-green" style="height: 50px;" long size="large" type="success">登录</Button>
                </div>

            </div>

            <div v-show="type === 'forget'">

                <div class="t-c m-15-0">
                    <img src="assets/image/login-icon.png" class="loginIcon">
                </div>
                <div class="m-b-20">

                    <div class="input-box flex-c m-b-10" :class="{active: activeInput === 'fMobile'}">
                        <div class="gray p-0-10">+86</div>
                        <Input @on-focus="activeInput = 'fMobile'" @on-blur="activeInput = ''" :border="false" class="h40 flex-1 p-0-15" placeholder="请输入手机号码"/>
                    </div>
                    <div  class="t-r m-r-10 m-b-10"><span class="green cursor-p" >发送验证码</span></div>

                    <div class="input-box flex-c m-b-10" :class="{active: activeInput === 'fVcode'}">
                        <Input @on-focus="activeInput = 'fVcode'" @on-blur="activeInput = ''" :border="false" class="h40 flex-1 p-0-15" placeholder="请输入验证码"/>
                    </div>

                    <div class="input-box flex-c m-b-10" :class="{active: activeInput === 'fPassword'}">
                        <Input @on-focus="activeInput = 'fPassword'" @on-blur="activeInput = ''" :border="false" class="h40 flex-1 p-0-15" placeholder="设置新登录密码"/>
                    </div>

                    <div class="input-box flex-c m-b-10" :class="{active: activeInput === 'fPassword2'}">
                        <Input @on-focus="activeInput = 'fPassword2'" @on-blur="activeInput = ''" :border="false" class="h40 flex-1 p-0-15" placeholder="请再次输入密码"/>
                    </div>

                </div>

                <div class="flex-c-c">
                    <Button @click="changeType('login')" class="btn-green w30p m-r-15" type="success">取消</Button>
                    <Button @click="confirmForget" class="btn-green w30p" type="success">确定</Button>
                </div>

            </div>


        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                type: 'login',

                vcodeTemp: '',

                activeInput: '',
                username: '',
                password: '',
                vcode: '',

                fMobile: '',
                fVcode: '',
                fPassword: '',
                fPassword2: '',

            }
        },
        created() {
            this.changeVcode();
        },
        methods: {
            changeType(type) {
                this.type = type;
            },
            changeVcode(len) {
                len = 4;
                var  orgStr='ABCDEFGHIJKLMNPQRSTUVWXYZabcdefghijklmnpqrstuvwxyz123456789';
                let returnStr="";
                for (var i = 0; i < len; i++) {
                    returnStr+=orgStr.charAt(Math.floor((Math.random()*orgStr.length)));
                }
                this.vcodeTemp = returnStr;
            },
            confirmLogin() {
                if(this.vcode.toLocaleLowerCase() != this.vcodeTemp.toLocaleLowerCase()) {
                    this.$Message.warning('请输入正确验证码')
                    return;
                }

                let userInfo = {
                    Id: 13
                };
                this.$store.commit('user/setUserInfo', userInfo);
                this.$Message.success('登录成功');
                this.$router.push('/')
            },

            confirmForget() {

            },
        },
    }
</script>
